

<template>
    <div class="storeInfo supplier">
        <div class="head">
            <p style="padding-left:20px;line-height:60px">VIP卡、储值卡充值档位设置</p>
            <el-form class="headForm">
                <el-button type="success" @click="theClick('add')">添加</el-button>               
            </el-form>
            
        </div> 
        <!-- <p style="line-height:30px;padding-left:20px;margin-top:8px;color:#333" v-if="form.order_id == ''">最近{{total}}笔人工退款订单记录</p> -->
        <!-- table -->
        <div class="tabContainer_SI tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" >
                <!-- 序号	档位	档位属性	赠品描述	更新时间	操作			 -->
                <el-table-column prop="gear_id" label="序号" fixed ></el-table-column>
                <el-table-column prop="price" label="档位"> </el-table-column>
                <el-table-column prop="card_name" label="档位属性" ></el-table-column>
                <el-table-column  label="赠品描述" width="600px">
                    <template slot-scope="scope">
                        <div v-if="scope.row.card_desc.length != 0">
                            <p v-for="(item,i) in scope.row.card_desc" :key="i">{{item}}</p>
                        </div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="更新时间"></el-table-column>  
                <el-table-column prop="" label="操作" v-if="limitList.length != 0">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                </el-table-column>
                <el-table-column v-else label="操作">/</el-table-column>  

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>

        <el-dialog :title="title" :visible.sync="addalertShow" class="business">
            <el-form ref="form" :model="editparams" label-width="80px">
                   
                <el-form-item label="卡分类">
                    <el-radio v-model="labelradio" label="1-会员储蓄卡">会员储蓄卡</el-radio>
                    <el-radio v-model="labelradio" label="2-VIP卡">VIP卡</el-radio>
                </el-form-item>

                <el-form-item label="档位金额">
                    <el-input v-model="editparams.price" type="text"></el-input>
                </el-form-item>  

                <el-form-item label="赠品内容">
                        <div v-if="card_desc != ''" class="needBore">
                            <p class="zengInfo" v-for="(item,i) in card_desc" :key="i">{{item}}</p>
                        </div>
                        <div v-else  class="needBore"><p class="zengInfo">未选择赠品内容</p></div>
                </el-form-item> 
                <div class="combination" v-for="(item,i) in largess" :key="i">
                    <hr style="border:0.5px dashed #ccc">
                    <el-form-item :label="'组合'+(i+1)">

                        <div style="display:flex;margin-bottom:5px" v-for="(iteminer,ii) in item" :key="ii" >
                            <el-select v-model="iteminer.val" style="width:130px" @change="getVal(i,ii,iteminer.val)">
                                <el-option v-for="item in zengtypeList" :key="item.status" :label="item.name" :value="item.status"></el-option>
                            </el-select>    
                            <div v-if="iteminer.val == 1" class="iteminer">
                                <searchItem :input_url="surl" :default_txt="iteminer.largess_product.product_name" :i="i+'-'+ii+'-'+iteminer.val" class="inputone" v-on:getsearchItemGood="getgooditem"></searchItem>
                                <!-- <el-input placeholder="搜索商品" class="inputone" v-model="iteminer.product_name"></el-input> -->
                                <el-input placeholder="数量" v-model="iteminer.largess_product.number" class="inputtwo"></el-input>
                                <span class="el-icon-close theclose" @click="deleteI(i,ii)"></span>
                                
                            </div>   
                            <div v-if="iteminer.val == 2" class="iteminer">
                                <el-input placeholder="输入金额" class="inputone" v-model="iteminer.largess_price"></el-input>
                                <span class="el-icon-close theclose" @click="deleteI(i,ii)"></span>
                            </div>  
                            <div v-if="iteminer.val == 3" class="iteminer">
                                <el-input placeholder="数量"  class="inputone"  v-model="iteminer.largess_mic"></el-input>
                                <span class="el-icon-close theclose" @click="deleteI(i,ii)"></span>
                            </div>
                            <div v-if="iteminer.val == 4" class="iteminer">
                                <span class="el-icon-close theclose" @click="deleteI(i,ii)"></span>
                            </div> 
                            <div v-if="iteminer.val == 5" class="iteminer">
                                <searchItem :input_url="surl2" :default_txt="iteminer.coupon_batch.name" :i="i+'-'+ii+'-'+iteminer.val" class="inputone" v-on:getsearchItemGood="getgooditem2"></searchItem>
                                <!-- <el-input placeholder="搜索优惠券" class="inputone"  v-model="iteminer.coupon_batch.name"></el-input> -->
                                <el-input placeholder="数量" class="inputtwo" v-model="iteminer.coupon_batch.number"></el-input>
                                <span class="el-icon-close theclose" @click="deleteI(i,ii)"></span>
                            </div> 

                            <el-button type="primary" v-if="ii == 0" style="width:100px;height:40px;padding:0;margin-left:15px" @click="addgoods(i)">添加商品</el-button>
                        </div>
                        
                    </el-form-item>
                    
                </div>
                <div class="addZH">
                    <hr style="border:0.5px dashed #ccc">
                    <el-button type="primary" @click="addZH">+新组合</el-button>
                </div>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addalertShow = false">取 消</el-button>
                <el-button type="primary" @click="comfirm">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<style lang="scss">
.supplier{
        .el-dialog{
            .el-dialog__body{
                min-height: 300px;

            }
        } 
    }
  .tabContainer_SI{
      .el-table{
          .cell{
              text-align: center;
          }
      }
  }
</style>
<style lang="scss" scoped>
.needBore{
    .zengInfo{
        font-size:14px;
        color:rgba(0,0,0,0.5)
    }
}
.combination{
    .iteminer{
        display:flex;
        .inputone{
            width:120px;
            margin-left:5px  ;
            margin-right:5px ; 
        }
        .inputtwo{
            width:60px;
            margin-right:5px;
        }
        .theclose{
            color:red;
            font-size:20px;
            line-height: 40px;    
        }
    }

}

</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 

import searchItem from "../../pop/goodslist.vue"
export default {
    components:{
        searchItem
    },
    data () {
    return {
        tableData:[],
        total:50,
        size:20,
        form:{size:20,
            page:1
        },
        pageNum:1,
        limitList:[
            {name:'编辑',url:"edit"},
            {name:'删除',url:"del"},
        ],
        title:"编辑充值档位",
        addalertShow:false,
        editparams:{
            largess:[]
        },
        zengtypeList:[
            {status:'',name:'赠送属性'},
            {status:'1',name:'赠商品'},
            {status:'2',name:'赠钱'},
            {status:'3',name:'专属麦克风'},
            {status:'4',name:'管家服务,生日房布置'},
            {status:'5',name:'优惠券'}

        ],
        labelradio:'',
        largess:[[]],
        surl:potUrl.itemSearch,//模糊搜索商品接口
        surl2:potUrl.couponsearch,//模糊搜索优惠券接口
        normal:{
            largess_product:{product_name:'',number:"",product_id:"",unit:""},
            largess_price:"",
            largess_mic:"",
            largess_birthday:"",
            coupon_batch:{batch_id:"",number:"",name:""},
            info_id:'',
            val:""
        },
        card_desc:[]//赠品内容描述的地方

    }
  }, 
   mounted(){
      let that = this;
      that.getList();
      abc.limit(that,'vipgear')
      
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        that.getList()
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.viplist,that.form,(res)=>{
            that.tableData=res.data;
            that.total = res.data.length;
        })//列表
    },
    theClick(a,b){
        const that = this;   
        console.log(a)
        if(a == 'del'){
            abc.twoTips(that,'确认删除？',()=>{})
        }else{
            that.addalertShow = true;
            if(a == 'edit'){
                abc.get(that,potUrl.vipinfo,{gear_id:b.gear_id},(res)=>{
                    if(res.data.length == 0){
                        that.$message('数据有问题，请找相关后台人员修改。');
                        that.addalertShow = false;
                        return
                    }
                    that.labelradio = res.data.level+'-'+ res.data.card_name;
                    that.editparams.price = res.data.price;
                    that.editparams.gear_id = res.data.gear_id;
                    
                    var o = res.data.largess;
                    var n = 0;
                    that.largess = []
                    o.map((item,i)=>{
                        that.card_desc.push(item.card_desc)
                        if(n == 0 && i == 0){
                            that.largess.push([]);
                            if(item.card_desc == ''){
                                that.largess[0].push(that.normal)
                                return
                            }
                        }
                        if(item.largess_product.length != 0){
                            //商品
                            item.largess_product.map((citem,c)=>{
                                var cb = {
                                        largess_product:citem,
                                        largess_price:"",
                                        largess_mic:"",
                                        largess_birthday:"",
                                        coupon_batch:{batch_id:"",number:"",name:""},
                                        info_id:item.info_id,
                                        val:"1"
                                    };
                                that.largess[n].push(cb)
                            })
                        }
                        if(item.largess_price != ''){
                                var cb1 = {
                                        largess_product:{product_name:'',number:"",product_id:"",unit:""},
                                        largess_price:item.largess_price,
                                        largess_mic:"",
                                        largess_birthday:"",
                                        coupon_batch:{batch_id:"",number:"",name:""},
                                        info_id:item.info_id,
                                        val:"2"
                                    };
                                that.largess[n].push(cb1)
                        }
                        if(item.largess_mic != ''){
                                var cb = {
                                        largess_product:{product_name:'',number:"",product_id:"",unit:""},
                                        largess_price:'',
                                        largess_mic:item.largess_mic,
                                        largess_birthday:"",
                                        coupon_batch:{batch_id:"",number:"",name:""},
                                        info_id:item.info_id,
                                        val:"3"

                                    };
                                that.largess[n].push(cb)
                        }
                        if(item.largess_birthday != '0'){
                                var cb = {
                                        largess_product:{product_name:'',number:"",product_id:"",unit:""},
                                        largess_price:'',
                                        largess_mic:'',
                                        largess_birthday:item.largess_birthday,
                                        coupon_batch:{batch_id:"",number:"",name:""},
                                        info_id:item.info_id,
                                        val:"4"
                                    };
                                that.largess[n].push(cb)
                        }
                        if(item.coupon_batch.length != 0){
                            //优惠券
                            item.coupon_batch.map((citem,c)=>{
                                var cb = {
                                        largess_product:{product_name:'',number:"",product_id:"",unit:""},
                                        largess_price:'',
                                        largess_mic:'',
                                        largess_birthday:'',
                                        coupon_batch:citem,
                                        info_id:item.info_id,
                                        val:"5"
                                    };
                                that.largess[n].push(cb)
                            })
                        }
                        if(that.largess[i].length != 0 && i != (o.length-1)){
                            n++;
                            that.largess.push([]);
                        }
                    })
                    console.log(that.largess)
                })
            }else{
                that.editparams.price = '';
                that.card_desc = []  
                that.largess = [[]]
                that.largess[0].push(that.normal)
                that.labelradio = '1-会员储蓄卡'
            }
        }
    },
    comfirm(){
        //编辑、添加确定按钮
        const that = this;
        var arr=[],obj={};
        that.addalertShow = false;
        that.largess.map((item,i)=>{
            obj={coupon_batch:[],largess_product:[],largess_price:"",largess_mic:"",largess_birthday:""}
            item.map((iitem,ii)=>{
                switch (iitem.val) {
                    case '1':
                        obj.largess_product.push(iitem.largess_product)
                        break;
                    case '2':
                        obj.largess_price = iitem.largess_price
                        break;
                    case '3':
                        obj.largess_mic = iitem.largess_mic
                        break;
                    case '4':
                        obj.largess_birthday = '1'
                        break;
                    case '5':
                        obj.coupon_batch.push(iitem.coupon_batch)
                        break;

                    default:
                        break;
                }
                if(ii == (item.length-1)){
                    obj.info_id = iitem.info_id
                    arr.push(obj);
                }
                
            })
            
        })
        // console.log(arr)
        let radio = that.labelradio.split('-')
        that.editparams.largess = JSON.stringify(arr);
        that.editparams.card_name = radio[1]
        that.editparams.level = radio[0]
        console.log(that.editparams)
        let url = '';
        if(that.editparams.gear_id){
            url = potUrl.vipedit
        }else{
            url = potUrl.vipadd;
            that.editparams.gear_id = '';
        }
        abc.post(that,url,that.editparams,(res)=>{
            that.getList()
        })
    },
    addgoods(i){
        //添加赠品
        const that = this;
        let on = false;
        that.largess[i].map((liteminer,li)=>{
            if(liteminer.val == ''){
                on=true;
            }
            
        })
        if(!on){
            that.largess[i].push({
            largess_product:{product_name:'',number:"",product_id:"",unit:""},
            largess_price:"",
            largess_mic:"",
            largess_birthday:"",
            coupon_batch:{batch_id:"",number:"",name:""},
            info_id:'',
            val:""
        })
        }
        that.$forceUpdate()
    },
    getVal(o,i,v){
        //select框改变得时候会触发此事件
        const that = this;
        that.largess[o][i].largess_product.product_name = '';
        that.largess[o][i].largess_product.number = '';
        that.largess[o][i].largess_product.product_id = '';
        that.largess[o][i].largess_product.unit = '';
        that.largess[o][i].largess_price = '';
        that.largess[o][i].largess_mic = "";
        that.largess[o][i].largess_birthday = "";
        that.largess[o][i].coupon_batch.batch_id = '';
        that.largess[o][i].coupon_batch.number = '';
        that.largess[o][i].coupon_batch.name = '';
        that.largess[o][i].info_id = '';
        that.largess[o][i].val = v;
        console.log('change',that.largess)
        
    },
    getgooditem(data){
        //搜索商品后返回的参数
        console.log(data)
        const that = this;
        var indexarr = data.i.split('-');
        that.largess[indexarr[0]][indexarr[1]].largess_product.product_name = data.product_name
        that.largess[indexarr[0]][indexarr[1]].largess_product.unit = data.unit
        that.largess[indexarr[0]][indexarr[1]].largess_product.item_id = data.item_id
        that.largess[indexarr[0]][indexarr[1]].largess_product.product_id = data.product_id
        //
    },
    getgooditem2(data){
        //搜索优惠券后返回的参数
        console.log(data)
        const that = this;
        var indexarr = data.i.split('-');
        that.largess[indexarr[0]][indexarr[1]].coupon_batch.name = data.name
        that.largess[indexarr[0]][indexarr[1]].coupon_batch.batch_id = data.batch_id
    },
    addZH(){
        //新增组合的方法
        const that = this;
        that.largess.push([{
            largess_product:{product_name:'',number:"",product_id:"",unit:""},
            largess_price:"",
            largess_mic:"",
            largess_birthday:"",
            coupon_batch:{batch_id:"",number:"",name:""},
            info_id:'',
            val:""
        }])
    },
    deleteI(i,ii){
        //删除某一项的方法
        const that = this;
        that.largess[i].splice(ii,1);
        if(that.largess[i].length == 0){
            that.largess.splice(i,1)
        }
    }
  }
}
</script>
